<template>
	<div class="one-process">
		<Card>
			<div class="flex op-ts">
				<div class="flex-grow-base">
					<div class="one-process-title">
						<div>{{list.title}}：累计办理业务数量{{count}}个</div>
						<div class="one-process-time">
							<span>总体耗时：{{alltime}}小时</span>
							<span>平均耗时：{{avgtime}}小时</span>
						</div>
					</div>
					<div class="op-times">
						<div class="op-times-title">
							<span :class="{
								isActive: item.isActive
							}" v-for="(item,index) in hsTags" :key="index" @click="changeHsTags(item)">
								{{item.title}}
							</span>
							<!-- <span @click="lineChart(timeLine,'currentAvgValue')">平均耗时</span>
							<span @click="lineChart(timeLine,'currentSumValue')">总耗时</span> -->
						</div>
						<div class="op-times-chart op-relative-c">
							<div v-show="isLine">
								<div id="opLineChart"></div>
							</div>
							<div v-show="!isLine" class="op-nodata flex-all">
								<div class="text-center">
									<!-- <div>
										<img src="../assets/img/console/noInfo.png" alt="">
									</div> -->
									暂无数据
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="op-timep" style="width: calc(50vw - 320px)">
					<div class="op-time-ti flex align-items-center">
						<img src="../../assets/img/console/gtime.png" alt="">
						各阶段总体耗时占比
					</div>
					<div class="zCs op-relative-c">
						<div v-show="isCir">
							<div class="flex zCharts" ref="zChart"></div>
						</div>
						<div v-show="!isCir" class="op-nodata flex-all">
							<div class="text-center">
								<!-- <div>
									<img src="../assets/img/console/noInfo.png" alt="">
								</div> -->
								暂无数据
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="op-timej">
				<div class="op-time-ti flex align-items-center">
					<img src="../../assets/img/console/gjc.png" alt="">
					各阶段平均耗时对比
				</div>
				<div class="timejc op-relative-c">
					<div v-show="isZ">
						<div id="timejChart"></div>
					</div>

					<div v-show="!isZ" class="op-nodata flex-all">
						<div class="text-center">
							<!-- <div>
								<img src="../assets/img/console/noInfo.png" alt="">
							</div> -->
							暂无数据
						</div>
					</div>
				</div>
			</div>
			<div class="op-ctime">
				<div class="op-time-ti flex align-items-center">
					<img src="../../assets/img/console/ctime.png" alt="">
					各任务超时率分析
				</div>
				<div class="timejc op-relative-c">
					<div v-show="isZh">
						<div id="timecChart"></div>
					</div>
					<div v-show="!isZh" class="op-nodata flex-all">
						<div class="text-center">
							<!-- <div>
								<img src="../assets/img/console/noInfo.png" alt="">
							</div> -->
							暂无数据
						</div>
					</div>
				</div>
			</div>
		</Card>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import ajax from "../../ajax_util"
	export default {
		data() {
			return {
				count: 0,
				alltime: 0,
				avgtime: 0,
				timeLine: [],
				isLine: true,
				isCir: true,
				isZ: true,
				isZh: true,
				hsTags: [{
					isActive: true,
					title: "平均耗时",
					args: "currentAvgValue"
				}, {
					isActive: false,
					title: "总耗时",
					args: "currentSumValue"
				}]
			}
		},
		watch: {
			list(newVal, oldVal) {
				this.getInfo();
			},
			oneTime(newVal, oldVal) {
				if (newVal.length) {
					this.getInfo();
				}
			}
		},
		props: ["list", "oneTime"],
		methods: {
			setSureTime(time) {
				var day = "";
				day = new Date(time); //转换成标准时间
				var y = day.getFullYear(); //年
				var m = day.getMonth() + 1; //月
				var d = day.getDate(); //日
				if (m < 10) {
					m = '0' + m;
				}
				if (d < 10) {
					d = '0' + d;
				}
				day = y + '-' + m + '-' + d;
				return day;
			},
			changeHsTags(item) {
				this.hsTags.forEach(item => {
					item.isActive = false;
				})
				item.isActive = true;
				this.lineChart(this.timeLine, item.args)
			},
			lineChart(data, val) {
				let myChart = echarts.init(document.getElementById("opLineChart"))
				var legend = [];
				var series = [];
				var timeArr = [];
				data.forEach((item, index) => {
					item[val] = item[val] ? item[val] : 0;
					legend.push(item.name);
					if (!item.month.includes("年")) {
						item.month = item.month.slice(0, 4) + "年" + item.month.slice(4) + "月";
					}
					if (!timeArr.includes(item.month)) {
						timeArr.push(item.month)
					}
					if (JSON.stringify(series).includes(item.name)) {
						series.forEach(si => {
							if (si.name == item.name) {
								si.data.push(item[val])
							}
						})
					} else {
						series.push({
							name: item.name,
							type: 'line',
							data: [item[val]],
							itemStyle: {
								normal: {
									color: '#F68B00', //改变折线点的颜色
									lineStyle: {
										color: '#F68B00' //改变折线颜色
									}
								}
							}
						})
					}
				})
				series.forEach((item, index) => {
					var color = "";
					switch (index % 7) {
						case 0:
							color = "#55A5FE";
							break;
						case 1:
							color = "#BA88FF";
							break;
						case 2:
							color = "#69E4C5";
							break;
						case 3:
							color = "#FFBE67";
							break;
						case 4:
							color = "#687FFF";
							break;
						case 5:
							color = "#FF7D7E";
							break;
						case 6:
							color = "#7AD1FF";
							break;
					}
					item.itemStyle = {
						normal: {
							color: color, //改变折线点的颜色
							lineStyle: {
								color: color //改变折线颜色
							}
						}
					}
				})

				myChart.setOption({
					tooltip: {
						trigger: 'axis',
						formatter: function(params) {
							var relVal = params[0].name;
							for (var i = 0, l = params.length; i < l; i++) {
								relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + "小时";
							}
							return relVal;
						}
					},
					legend: {
						icon: "circle",
						data: legend,
						left: '13%',
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: timeArr
					},
					yAxis: {
						name: (val == "currentSumValue") ? "总耗时走势\n\n（总小时）" : "平均耗时走势\n\n（总小时）",
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: ['#efefef'],
								width: 1,
								type: 'solid'
							},
						}
					},
					series: series
				}, true)
			},
			cirChart(data, id) {
				let myChart = echarts.init(document.getElementById(id));
				var legend = [];
				var series = [];
				var color = "";
				data.forEach((item, index) => {
					legend.push(item.name);
					item.value = item.value ? parseFloat(item.value).toFixed(2) : 0;
					switch (index % 7) {
						case 0:
							color = "#55A5FE";
							break;
						case 1:
							color = "#BA88FF";
							break;
						case 2:
							color = "#69E4C5";
							break;
						case 3:
							color = "#FFBE67";
							break;
						case 4:
							color = "#687FFF";
							break;
						case 5:
							color = "#FF7D7E";
							break;
						case 6:
							color = "#7AD1FF";
							break;
					}
					item.itemStyle = {
						color: color
					}
				})
				series = data;
				var center = (document.getElementById(id).offsetHeight - legend.length * 25) / 2;
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b}: {c} ({d}%)',
						extraCssText: 'width:240px;height:60px;'
					},
					legend: {
						orient: 'vertical',
						left: "72%",
						top: center,
						icon: "circle",
						data: legend,
						textStyle: {
							fontSize: 14
						}
					},
					series: [{
						name: '',
						type: 'pie',
						radius: ['50%', '70%'],
						center: ["35%", "45%"],
						label: {
							normal: {
								show: false,
								position: 'center'
							},
							emphasis: {
								show: false,
								textStyle: {
									fontSize: '20',
									fontWeight: 'bold'
								}
							}
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						data: series
					}]
				}, true);
			},
			zChart(data) {
				let myChart = echarts.init(document.getElementById("timejChart"));
				var source = [];
				data.forEach((item, index) => {
					source.push({
						product: item.name,
						"历史平均": item.hisAvgValue ? item.hisAvgValue : 0,
						"当前平均": item.currentAvgValue ? item.currentAvgValue : 0
					});
				})
				myChart.setOption({
					legend: {
						left: "center"
					},
					tooltip: {},
					grid: {
						left: "83",
						right: "2%"
					},
					dataset: {
						dimensions: ['product', '历史平均', "当前平均"],
						source: source
					},
					xAxis: {
						type: 'category',
						axisLabel: {
							interval: 0,
							// rotate: 10,
							formatter: function(params) {
								var temp = ""
								if (params.length > 6) {
									temp = params.slice(0, params.length / 2) + '\n' + params.slice(params.length / 2)
								} else {
									temp = params
								}
								return temp
							}
						}
					},
					yAxis: {
						name: "小时",
						splitLine: {
							show: true,
							lineStyle: {
								color: ['#efefef'],
								width: 1,
								type: 'solid'
							},
						}
					},
					// Declare several bar series, each will be mapped
					// to a column of dataset.source by default.
					series: [{
							type: 'bar',
							barWidth: '20',
							itemStyle: {
								normal: {
									color: '#FFC77E'
								}
							}
						},
						{
							type: 'bar',
							barWidth: '20',
							itemStyle: {
								normal: {
									color: '#7AD1FF'
								}
							}
						}
					]
				})
			},
			zhChart(data) {
				let myChart = echarts.init(document.getElementById("timecChart"));
				var ctime = [];
				var htime = [];
				var axisData = [];
				var timeArr = [];
				var dueCountObj = {};
				var percentObj = {};
				data.forEach((item, index) => {
					if (!timeArr.includes(item.name)) {
						timeArr.push(item.name)
					}
					if (item.name in dueCountObj) {
						dueCountObj[item.name] += (item.dueCount ? item.dueCount : 0);
					} else {
						dueCountObj[item.name] = item.dueCount ? item.dueCount : 0;
					}
					if (item.name in percentObj) {
						percentObj[item.name] += (item.proportionPercent ? Number(item.proportionPercent) : 0);
					} else {
						percentObj[item.name] = (item.proportionPercent ? Number(item.proportionPercent) : 0)
					}
				})
				Object.keys(dueCountObj).forEach(item => {
					ctime.push(dueCountObj[item])
				})
				Object.keys(percentObj).forEach(item => {
					htime.push(percentObj[item])
				})
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							crossStyle: {
								color: '#999'
							}
						}
					},
					grid: {
						left: "83",
						right: "2%"
					},
					legend: {
						data: ['超时数', '超时率']
					},
					xAxis: [{
						type: 'category',
						data: timeArr,
						axisPointer: {
							type: 'shadow'
						},
						axisLabel: {
							interval: 0,
							// rotate: 10,
							formatter: function(params) {
								console.log("params--2----->", params)
								var temp = ""
								if (params.length > 6) {
									temp = params.slice(0, params.length / 2) + '\n' + params.slice(params.length / 2)
								} else {
									temp = params
								}
								return temp
							}
						}
					}],
					yAxis: [{
							type: 'value',
							name: '超时数(个)',
							min: 0,
							// max: 250,
							// interval: 50,
							axisLabel: {
								formatter: '{value}'
							}
						},
						{
							type: 'value',
							name: '超时率',
							min: 0,
							// max: 25,
							// interval: 5,
							axisLabel: {
								formatter: '{value}%'
							}
						}
					],
					series: [{
							name: '超时数',
							type: 'bar',
							data: ctime,
							barWidth: '30',
							itemStyle: {
								normal: {
									color: '#3CB8FF'
								}
							}
						},
						{
							name: '超时率',
							type: 'line',
							yAxisIndex: 1,
							data: htime,
							itemStyle: {
								normal: {
									color: '#FFC77E'
								}
							}
						}
					]
				})
			},
			getTime(num, year) {
				var day = new Date().setMonth((new Date().getMonth() - num)); //日期是30天前的对应时间戳
				if (year) {
					day = new Date().setFullYear((new Date().getFullYear() - num));
				}
				day = new Date(day); //转换成标准时间
				var y = day.getFullYear(); //年
				var m = day.getMonth() + 1; //月
				var d = day.getDate(); //日
				if (m < 10) {
					m = '0' + m;
				}
				if (d < 10) {
					d = '0' + d;
				}
				day = y + '-' + m + '-' + d;
				return day;
			},
			getLastMon() {
				return this.getTime(4);
			},
			getDate() {
				return this.getTime(0);
			},
			getInfo() {
				var startTime = this.oneTime[0];
				var endTime = this.oneTime[1];
				var url = this.CONFIG.analysis_url + "/anapi/workflows/" + this.list.key
				var param = {
					fromDate: startTime,
					toDate: endTime
				}
				var that = this
				ajax.get({
					url: url,
					that: that,
					params: param,
					success: function(data) {
						that.count = data.count;
						that.timeLine = data.monthDurationStat;
						that.alltime = data.sumDuration;
						that.avgtime = data.avgDuration;
						if (data.monthDurationStat) {
							that.isLine = true;
							that.lineChart(data.monthDurationStat, "currentAvgValue");
						} else {
							that.isLine = false;
						}
						if (data.phaseAvgDurationInfo) {
							that.isZ = true;
							that.zChart(data.phaseAvgDurationInfo)
						} else {
							that.isZ = false;
						}
						var zChart = that.$refs.zChart;
						var html = "";
						if (data.phaseSumDurationPercentInfo) {
							that.isCir = true;
							zChart.innerHTML = "<div id='cirChart'></div>";
							that.cirChart(data.phaseSumDurationPercentInfo, "cirChart");
						} else {
							that.isCir = false;
						}
						if (data.taskDueStatDtos) {
							that.isZh = true;
							that.zhChart(data.taskDueStatDtos)
						} else {
							that.isZh = false;
						}
					}
				})
			}
		},
		mounted() {
			this.getInfo();
		}
	}
</script>

<style lang="less">
	.one-process {
		.op-ts {
			padding: 0 .4rem;
		}

		.one-process-title {
			padding-top: .4rem;
			color: #000;
			font-size: .3rem;
			font-weight: bold;

			.one-process-time {
				span {
					margin-right: .4rem;
				}
			}

		}

		.op-relative-c {
			position: relative;
			width: 100%;

			.op-nodata {
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				font-size: .5rem;
				color: #ccc;

				.text-center {
					text-align: center;
				}

				img {
					margin-bottom: .4rem;
					height: 3rem;
				}
			}
		}

		.op-times {
			margin-top: .5rem;
			border: 1px solid #E5E5E5;

			.op-times-title {
				background-color: #F5F6FA;
				padding: .24rem .36rem;
				color: #666;

				span {
					margin-right: 1.08rem;
					font-weight: bold;
					cursor: pointer;

					&.isActive {
						color: #4DA0FE;
					}
				}
			}

			.op-times-chart {
				padding: .6rem 0;
				width: 100%;
				height: 7.38rem;

				#opLineChart {
					width: 100%;
					height: 7.38rem;
				}
			}
		}

		.op-timep {
			width: 10.2rem;
			margin-left: 0.78rem;
		}

		.op-timep,
		.op-timej,
		.op-ctime {
			.op-time-ti {
				padding: .88rem 0 .38rem 0;
				border-bottom: 1px solid #BEBEBE;
				margin-bottom: .9rem;
				font-size: .4rem;

				img {
					width: .48rem;
					margin-right: .2rem;
				}
			}

			.zCs {
				min-height: 4.8rem;
			}

			.zCharts {
				flex-wrap: wrap;
				// min-height: 4.8rem;
			}

			#cirChart {
				width: calc(50vw - 320px);
				height: 9.18rem;
				// margin-right: .6rem;
				margin-bottom: .6rem;
			}

			.zCharts {
				width: 100%;
				height: 9.18rem;
				// margin-right: .6rem;
				margin-bottom: .6rem;
			}

			.timejc {
				height: 7rem;
			}

			#timejChart,
			#timecChart {
				width: 100%;
				height: 7rem;
				width: 100%;
			}
		}

		.op-timep .op-time-ti {
			padding-top: .4rem;
		}
	}
</style>
